<template>
  <div>
    首页 - {{ name }} <br />
    <a-button @click="modifyStateName">按钮1</a-button> <br />
    <a-skeleton avatar active loading paragraph :title="{ width: '200px' }">
        </a-skeleton>
     <a-skeleton :avatar="{shape: 'square', size: 'small'}" active :loading="loadData" :paragraph="{rows: 4 , width: ['200px', '200px', '200px', '200px']}" :title="false">
        </a-skeleton>  
    <a-skeleton
      active
      :loading="loadData"
      :paragraph="{ rows: 1, width: '100%' }"
      :title="false"
    >
      {{ data }}
    </a-skeleton>
    <br />
    <a-button @click="messageHandle">全局消息</a-button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, Ref, onMounted, getCurrentInstance } from 'vue'
import { useStore, mapState } from 'vuex'
import { tests, IResult, IWeather } from '../api' 
export default defineComponent({
  computed: {
    ...mapState({
      name: (state: any) => state.name
    })
  },
  mounted () {},
  setup (props, context) {
    const config = getCurrentInstance()?.appContext.config.globalProperties
    const $store = useStore()
    const data: Ref<IWeather> = ref({})
    const loadData: Ref<Boolean> = ref(true)

    console.log('用户名：', $store.state.name)
    const modifyStateName = function () {
      $store.commit('UPDATE')
      tests.getWeather({ city: '重庆' }).then((res: any) => {
        const resData: IResult<IWeather> = res.data
        data.value = resData.data as IWeather
        console.log(data.value.max)
        loadData.value = false
      })
    }

    onMounted(() => {
      /*
      tests.getWeather({ city: '重庆' }).then((res: any) => {
        const resData: IResult<IWeather> = res.data
        data.value = resData.data as IWeather
        console.log(data.value.max)
        setTimeout(() => {
          loadData.value = false
        }, 1000)
      })
      */
    })

    const messageHandle = function (): void {
      config?.$message.success('消息')
    }

    return {
      modifyStateName,
      data,
      loadData,
      messageHandle
    }
  }
})
</script>

<style scoped></style>
